<template>
    <div class="container header-top">
        <div class="top-left">
            <h3>{{ title }}工作台</h3>
            <span>{{ subTitle }}</span>
        </div>
        <div class="top-right">
            <el-dropdown>
                <span class="el-dropdown-link">
                    欢迎,admin
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
let props = defineProps(['title','subTitle']) 
</script>

<style lang="less" scoped>

.header-top {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-left{
    display: flex;
    align-items: end;
    span{
        margin-left: 20px;
        font-size: 14px;
        color: #666;
    }
}
</style>